<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JM航空</title>
    <link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css"/>
    <link rel="stylesheet" href="../static/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../static/font/icon/iconfont.css">
    <link rel="stylesheet" href="../static/css/index.css"/>
</head>
<body>
<div id="appCenter">
    <el-menu mode="horizontal" :default-active="activeIndex" active-text-color="#409EFF">
        <el-menu-item index="0" id="logo">JM航空&nbsp;&nbsp;&nbsp; <span
                class="fa fa-plane fa-2x"></span></el-menu-item>
        <el-menu-item index="1"><a href="orderNav0.html">机票预订</a></el-menu-item>
        <el-menu-item index="2"><a href="searchFlight.html">航班查询</a></el-menu-item>
        <el-menu-item id="user" index="3">
            <img class="el-tooltip" src="../static/image/flag.png"/>
            <el-dropdown>
                <span class="el-dropdown-link">{{userChName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><a href="userCenter.html">我的订单</a>
                    </el-dropdown-item>
                    <el-dropdown-item><a href="https://github.com/Xiant999/AirSystem" target="_blank">GitHub</a>
                    </el-dropdown-item>
                    <el-dropdown-item divided><a href="/AirSystem_war_exploded/logout">退出</a></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-menu-item>
    </el-menu>

    <el-row>
        <el-col :span="3">
            <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo">
                <el-menu-item index="1">
                    <el-button @click="change(1)" size="medium ">
                        <i class="el-icon-menu"></i>
                        <span slot="">个人中心</span>
                    </el-button>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-button @click="change(2)" size="medium ">
                        <i class="el-icon-document"></i>
                        <span slot="">我的订单</span>
                    </el-button>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-button @click="change(3)" size="medium ">
                        <i class="el-icon-setting"></i>
                        <span slot="">账号设置</span>
                    </el-button>
                </el-menu-item>
            </el-menu>
        </el-col>

        <!--组件1-->
        <el-col :push="1" :span="19" style="margin-top: 10px" v-show="btn===1">
            <el-card>
                <div class="myCard">
                    <el-row>
                        <el-button @click="showSave=true" type="primary" icon="el-icon-plus">新增</el-button>
                    </el-row>
                    <br><br>

                    <!--显示表格-->
                    <el-table
                            ref="userPasses"
                            :data="userPasses"
                            border
                            tooltip-effect="dark"
                            style="width: 100%">
                        <el-table-column
                                prop="userpassType"
                                align="center"
                                fixed
                                label="乘客类型"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="userpassName"
                                label="乘客姓名"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="证件号"
                                width="400">
                            <template slot-scope="scope">
                                {{scope.row.userpassCertype}} {{scope.row.userpassCerid}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="userpassTel"
                                label="手机号码"
                                width="150">
                        </el-table-column>
                        <el-table-column label="操作" align="center" fixed="right" width="200">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.row.userpassId)">删除
                                </el-button>
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.row.userpassId)">编辑
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <br><br>
                </div>
            </el-card>
        </el-col>


        <!--组件2-->
        <el-col :push="1" :span="19" style="margin-top: 10px" v-show="btn===2">
            <el-card>
                <div class="myCard">
                    <el-row><i class="fa fa-lg fa-id-badge"></i>&nbsp;订单信息</el-row>
                    <br>
                    <el-row>
                        <el-table :data="orders"
                                  style="width: 80%;margin-top: 20px"
                                  max-height="600">
                            <el-table-column label="订单编号"
                                             width="200"
                                             prop="orderId">
                            </el-table-column>
                            <el-table-column label="订单支付时间"
                                             width="200">
                                <template slot-scope="scope">
                                    {{scope.row.orderSureTime | timeStampFilter}}
                                </template>
                            </el-table-column>
                            <el-table-column label="联系人"
                                             width="100"
                                             prop="orderContactName">
                            </el-table-column>
                            <el-table-column label="航班号"
                                             width="100"
                                             prop="flightsId">
                            </el-table-column>
                            <el-table-column label="出发 - 到达"
                                             width="120">
                                <template slot-scope="scope">
                                    {{scope.row.upAirportName}}<br>
                                    &nbsp; &nbsp;&nbsp; &nbsp;&ShortDownArrow;<br>
                                    {{scope.row.downAirportName}}<br>
                                </template>
                            </el-table-column>
                            <el-table-column label="乘客人数"
                                             width="50" prop="orderNums">
                            </el-table-column>
                            <el-table-column label="支付总额"
                                             width="100" prop="orderPrice">
                                <template slot-scope="scope">
                                    <span class="fa fa-lg fa-rmb"
                                          style="color: #f52c31;">
                                        {{scope.row.orderPrice}}
                                    </span>
                                </template>
                            </el-table-column>

                            <el-table-column label="查看详情"
                                             width="100">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini" type="success"
                                            @click="getDetail(scope.row.orderId)">详情
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </div>
            </el-card>
        </el-col>


        <!--组件三-->
        <el-col :push="1" :span="19" style="margin-top: 10px" v-show="btn===3">
            <el-card>
                <div class="myCard">
                    <div class="fa fa-lg">更改密码</div>
                    <br><br>
                    <el-form :model="newPass"
                             :rules="rules2" ref="newPass" label-width="150px" status-icon style="margin-right: 20%">
                        <el-form-item prop="newPassword"
                                      label="请输入新密码">
                            <el-input prefix="请输入新密码" type="password" prefix-icon="el-icon-ump-mima"
                                      v-model="newPass.newPassword"
                                      auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item prop="checkPassWord"
                                      label="请再次确认密码">
                            <el-input prefix="请再次确认密码" type="password" prefix-icon="el-icon-ump-mima"
                                      v-model="newPass.checkPassWord"
                                      auto-complete="off"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button class="btn" type="warning" @click="this.newPass={}">重置
                            </el-button>
                            <el-button class="btn" type="primary" @click="changePass('newPass')">确认
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </el-col>
    </el-row>


    <!--添加对话框-->
    <el-dialog title="添加常用乘机人" :visible.sync="showSave" width="50%" :close-on-click-modal="false"
               :close-on-press-escape="false">
        <el-form :model="insertPass"
                 :rules="rules" ref="insertPass" label-width="100px" status-icon>
            <el-form-item label="乘客类型" prop="userpassType" required>
                <el-radio-group v-model="insertPass.userpassType">
                    <el-radio label="成人">成人(>12岁)</el-radio>
                    <el-radio label="儿童">儿童(2~12周岁)</el-radio>
                    <el-radio label="婴儿">婴儿(14天~2周岁)</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="姓名" prop="userpassName" required>
                <el-input v-model="insertPass.userpassName"></el-input>
            </el-form-item>
            <el-form-item label="身份证件" required>
                <el-row type="flex">
                    <el-col :span="8">
                        <el-form-item prop="userpassCertype">
                            <el-select placeholder="请选择证件类型" v-model="insertPass.userpassCertype">
                                <el-option v-for="item in types"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.label"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" style="width: 20px">&nbsp;&nbsp;-&nbsp;&nbsp;</el-col>
                    <el-col :span="15">
                        <el-form-item prop="userpassCerid">
                            <el-input v-model="insertPass.userpassCerid"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="手机号码" prop="userpassTel">
                <el-input v-model="insertPass.userpassTel"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showSave = false">取 消</el-button>
            <el-button type="primary" @click="savePass('insertPass')">新增</el-button>
        </div>
    </el-dialog>


    <!---修改对话框-->
    <el-dialog title="添加常用乘机人" :visible.sync="showEdit" width="50%" :close-on-click-modal="false"
               :close-on-press-escape="false">
        <el-form :model="editPass"
                 :rules="rules" ref="editPass" label-width="100px" status-icon>
            <el-form-item label="乘客类型" prop="userpassType" required>
                <el-radio-group v-model="editPass.userpassType">
                    <el-radio label="成人">成人(>12岁)</el-radio>
                    <el-radio label="儿童">儿童(2~12周岁)</el-radio>
                    <el-radio label="婴儿">婴儿(14天~2周岁)</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="姓名" prop="userpassName" required>
                <el-input v-model="editPass.userpassName"></el-input>
            </el-form-item>
            <el-form-item label="身份证件" required>
                <el-row type="flex">
                    <el-col :span="8">
                        <el-form-item prop="userpassCertype">
                            <el-select placeholder="请选择证件类型" v-model="editPass.userpassCertype">
                                <el-option v-for="item in types"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.label"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" style="width: 20px">&nbsp;&nbsp;-&nbsp;&nbsp;</el-col>
                    <el-col :span="15">
                        <el-form-item prop="userpassCerid">
                            <el-input v-model="editPass.userpassCerid"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="手机号码" prop="userpassTel">
                <el-input v-model="editPass.userpassTel"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showEdit = false">取 消</el-button>
            <el-button type="primary" @click="updatePass('editPass')">更新</el-button>
        </div>
    </el-dialog>


    <!--详情对话框-->
    <el-dialog title="订单详情" :visible.sync="showDetail" width="60%" :close-on-click-modal="false"
               :close-on-press-escape="false">
        <el-table :data="oneOrder.tickets"
                  style="width: 80%"
                  max-height="600">
            <el-table-column label="机票编号"
                             width="150"
                             prop="ticketId">
            </el-table-column>
            <el-table-column label="乘客姓名"
                             width="100"
                             prop="passengerName">
            </el-table-column>
            <el-table-column label="证件号"
                             width="200"
                             prop="passengerTel">
                <template slot-scope="scope">
                    {{scope.row.passengerCertype}}<br>
                    {{scope.row.passengerCerid}}
                </template>
            </el-table-column>
            <el-table-column label="机票价"
                             width="80"
                             prop="ticketPrice">
            </el-table-column>
            <el-table-column label="座位号"
                             width="80">
                <template slot-scope="scope">
                    {{scope.row.spaceId}}-
                    {{scope.row.ticketSeat}}
                </template>
            </el-table-column>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDetail = false">退 出</el-button>
            </div>
        </el-table>
    </el-dialog>


    <!---footer-->
</div>
<div class="footer">
    <el-container>
        <el-footer>
            <el-row :gutter="20">
                <el-col :span="10" :offset="10">
                    <div class="footer-inner">
                        <div class="copyright">&copy; 2019 &mdash; <span itemprop="copyrightYear">2020</span>
                            <span class="with-love">
                                    <i class="fa fa-thumbs-o-up"></i>
                                </span>
                            <span class="author" itemprop="copyrightHolder">WYX & CZT</span>
                        </div>
                        <label style="margin-left: 0px;">整合SpringMVC + Mybatis + Shiro &mdash;
                            简易的航空票务系统</label>
                    </div>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
</div>

</body>
<script type="text/javascript" src="../static/vue/vue.js"></script>
<script type="text/javascript" src="../static/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../static/vue/vue-resource.js"></script>
<script type="text/javascript" src="../static/vue/vue-router.js"></script>
<script type="text/javascript" src="../static/js/userCenter.js"></script>
</html>